<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="template/base.xhtml">

    <ui:define name="content">
        <h:outputStylesheet library="css" name="chooseSeats.css"/>
        <h:body>
            <h:form>
                <h2 align="center">
                    <h:outputFormat value="{0} - {1} minutes">
                        <f:param value="#{movieBean.movie.title}"/>
                        <f:param value="#{movieBean.movie.length}"/>
                    </h:outputFormat>
                    <br/>
                    <h:outputFormat value="{0} room">
                        <f:param value="#{seatBean.timeTable.room.name}"/>
                    </h:outputFormat>
                    <br/>
                    <h:outputText value="#{seatBean.startTime}">
                        <f:convertDateTime
                                pattern="yyyy/MM/dd HH:mm"/>
                    </h:outputText>
                </h2>
                <br/>

                <h:panelGrid columns="#{seatBean.seatCount + 2}"
                             styleClass="reserveTable"
                             headerClass="reserveTableHeader"
                             rowClasses="reserveTableOddRow, reserveTableEvenRow">
                    <c:forEach var="row" items="#{seatBean.seats}">
                        <c:forEach var="seat" items="#{row}" begin="0" end="0">
                            #{seat.seatNumber}
                        </c:forEach>
                        <c:forEach var="seat" items="#{row}" begin="1" end="#{seatBean.seatCount}">
                            <h:commandLink id="reserve" value="|#{seat.seatNumber}|" target="showDetails"
                                           action="#{seatBean.reserve(seat)}"
                                           style="color:#{seat.color}" disabled="#{seatBean.isDisabled(seat)}">
                                <f:param name="row" value="#{row}"/>
                                <f:param name="seat" value="#{seat.seatNumber}"/>
                            </h:commandLink>
                        </c:forEach>
                        <c:forEach var="seat" items="#{row}" begin="#{seatBean.seatCount + 1}"
                                   end="#{seatBean.seatCount + 1}">
                            #{seat.seatNumber}
                        </c:forEach>
                    </c:forEach>
                </h:panelGrid>
            </h:form>
            <h:form>
                <br/>
                <h:commandLink action="#{reservationController.process()}" rendered="#{seatBean.isSeatChosen()}">
                    <f:actionListener binding="#{seatBean.finalizeSeats()}"/>
                    <f:param name="timeTableID" value="#{seatBean.timeTableID}"/>
                    <h:graphicImage class="nextImage" library="images" name="next.png" />
                </h:commandLink>
                <h:commandLink action="movieDetails?faces-redirect=true">
                    <h:graphicImage class="backImage" library="images" name="back.png" />
                </h:commandLink>
            </h:form>
        </h:body>
    </ui:define>
</ui:composition>
</html>